<template>
    <el-container>
    
           <div class="smallmain">
               <div>
                    <el-card class="newscord">
           <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="搜索">
              <el-input
                v-model="formInline.user"
                placeholder="请输入关键词"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        </el-card>
            </div>      
          <div class="ranking">
              
            <el-card class="box-cardleft">
                <span>周评论最多</span>
              <p>1.XXXXX</p>
              <p>2.XXXXX</p>
              <p>3.XXXXX</p>
            </el-card>
          </div>

          <el-card class="box-cardone">
            <div class="demo-image">
              <div>
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>文章标题</span>
                  </div>
                  <div>
                <el-card slot="header" class="con-card">
                  <div v-for="o in 6" :key="o" >文章内容</div>
                </el-card>
              </div>
                  <div class="quantity">
                    <el-badge :value="12" class="item">
                      <el-button size="small" type="text">点赞数量</el-button>
                    </el-badge>

                    <el-badge :value="3" class="item">
                      <el-button size="small" type="text">评论数量</el-button>
                    </el-badge>

                    <el-badge :value="1" class="item" type="primary">
                      <el-button size="small" type="text">阅读数量</el-button>
                    </el-badge>

                    <el-badge :value="2" class="item" type="warning">
                      <el-button size="small" type="text">发布日期</el-button>
                    </el-badge>

                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        点我查看
                        <i class="el-icon-caret-bottom el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item class="clearfix">
                          评论
                          <el-badge class="mark" :value="12" />
                        </el-dropdown-item>
                        <el-dropdown-item class="clearfix">
                          回复
                          <el-badge class="mark" :value="3" />
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                  <div>
            </div>
                </el-card>
              </div>
            </div>
          </el-card>    
           </div>

     

    </el-container>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
    };
  },
  methods: {
    
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style scoped>


/* 文章栏大框框 */
.box-cardone {
  width: 65%;
  height: 460px;
  margin-top: 1px;
}

/* 文章标题卡片 */
.articletext {
  font-size: 14px;
}
/* 文章标题简介卡片 */
.box-card {
  width: 100%;
  height: 360px;
  float: right;
}
/* 
周排行大框框 */
.ranking {
  height: 460px;
  width: 34%;
  float: right;
}

/* 周排行卡片 */
.box-cardleft {
  width: 100%;
  height: 460px;
}
.smallmain{
    margin-left: 200px;
    width: 1000px;
}


/* 按钮设置 */
.quantity {
  width: 100%;
  height: 50px;
  margin-top: 10px;
}
.item {
  margin-top: 10px;
  margin-right: 7%;
  margin-left: 3%;
  width: 10%;
}


</style>